<template>
  <footer class="footer">
    <ul>
     <router-link tag="li" :to="item.path" v-for = " (item, index) of list " :key = "index">
        <span v-html="item.icon"></span>
        <p>{{item.name}}</p>
      </router-link>
    </ul>
  </footer>
</template>

<script>

export default {
  data () {
    return {
      list: [{
        name: '锦囊',
        icon: '<i class="iconfont icon-jinnang"></i>',
        path: '/silk'
      }, {
        name: '生活',
        icon: '<i class="iconfont icon-icon2"></i>',
        path: '/life'
      }, {
        name: '时光记',
        icon: '<i class="iconfont icon-zhuye"></i>',
        path: '/time'
      }, {
        name: '消息',
        icon: '<i class="iconfont icon-xiaoxi3"></i>',
        path: '/news'
      }, {
        name: '我的',
        icon: '<i class="iconfont icon-shouye"></i>',
        path: '/mine'
      }]
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.footer {
  ul {
    @include rect(100%, 100%);
    @include flexbox();
    li {
      @include flex();
      @include rect(auto, 100%);
      @include flexbox();
      @include justify-content();
      @include align-items();
      @include flex-direction(column);
      @include text-color(rgb(161, 132, 138));
      &.router-link-active {
        @include text-color(#EF98A9);
        span {
          @include rect(auto, 0.23rem);
          .iconfont {
            font-size: 0.24rem;
            line-height: 0.24rem;
          }
        }
        p {
          font-size: 0.12rem;
        }
      }
      span {
        display: inline-block;
        text-align: center;
        @include rect(auto, 0.22rem);
        .iconfont {
          font-size: 0.21rem;
          line-height: 0.21rem;
        }
      }
      p {
        font-size: 0.1rem;
      }
    }
  }
}
</style>
